<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>俄罗斯方块</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.left {
			float: left;
		}

		.right {
			float: right;
		}

		.clear-fixed:after {
			content: "";
			display: table;
			clear: both;
		}

		.container {
			width: 400px;
			height: 650px;
			position: absolute;
			top: 20px;
			left: 50%;
			margin-left: -200px;
		}

		.container .header {
			width: 100%;
			height: 50px;
			font-size: 25px;
		}

		.container .header .score-panel,
		.container .header .title {
			height: 50px;
			text-align: center;
			line-height: 50px;
		}

		#game-over {
			display: none;
			position: absolute;
			left: 50%;
			top: 50px;
			width: 400px;
			height: 600px;
			border-radius: 10px;
			background-color: rgba(0, 0, 0, .6);
			margin-left: -200px;
			text-align: center;
			z-index: 5;
		}

		#game-over .panel {
			position: absolute;
			left: 50%;
			right: 50%;
			top: 200px;
			width: 220px;
			height: 200px;
			border-radius: 10px;
			background-color: white;
			margin-left: -110px;
			text-align: center;
			z-index: 6;
		}

		#again {
			display: inline-block;
			width: 170px;
			height: 50px;
			border-radius: 10px;
			text-decoration: none;
			background-color: #9F8D77;
			color: white;
			font-size: 36px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="header clear-fixed">
			<div class="title left">俄罗斯方块</div>
			<div class="score-panel right">
				<span>SCORE: </span>
				<span id="score">0</span>
			</div>
		</div>
		<canvas id="canvas" width="400" height="600"></canvas>
		<div id="game-over">
			<div class="panel">
				<h1 id="state" style="margin-top: 5px;"></h1>
				<a href="javascript:;" id="again">Try again</a>
			</div>
		</div>
		<div>TIP: 通过键盘 ← → 键操作左右移动，按 ↓ 键加速下落，按space键变形</div>
	</div>
</body>
<script src="./js/config.js"></script>
<script src="./js/functions.js"></script>
<script src="./js/block.js"></script>
<script src="./js/game.js"></script>

</html>